<template>
  <div>
    <el-dialog
      :model-value="dialogVisible"
      title="选择供应商"
      width="600"
      :close-on-click-modal="false"
      @close="cls"
    >
      <!--查询-->
      <div>
        <el-input
          style="width: 250px"
          placeholder="输入编号/名称/联系人/电话查询"
        ></el-input>
        <el-button type="primary" style="margin-left: 20px">查询结果</el-button>
      </div>

      <!--供应商表格-->
      <div>
        <el-table :data="tableData" stripe border style="height: 250px;margin-top:20px;" @row-dblclick="sel" :header-cell-style="{
            'text-align': 'center',
            'font-size': '14px',
            color: '#666666',
            borderColor: '#e0e0e0',
          }" :cell-style="{
            
            'font-size': '12px',
            color: '#666666',
            borderColor: '#e0e0e0',
          }">
          <el-table-column type="index" label="序号" width="55" align="center"/>
          <el-table-column prop="code" label="编号" width="95" align="center" />
          <el-table-column prop="name" label="名称"  />
          <el-table-column prop="user" label="联系人" width="95" />
          <el-table-column prop="mobile" label="手机"/>
        </el-table>
      </div>

      <!--分页-->
      <div style="margin-left: 20px">
        <el-pagination
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="chg"
          @current-change="chgpg"
        />
      </div>

      
    </el-dialog>
  </div>
</template>

<script setup>
import { ref,onMounted } from "vue";
import { query } from "@/api/set/supplier.js";
import { getUser } from '@/utils/session.js'
//属性

//当前登录的用户信息
let user = {}
//声明属性
const props = defineProps({
  dialogVisible: {
    required: true,
    type: Boolean,
    default: false,
  },
});

//声明事件
const emits = defineEmits(["close","choose"]);

//供应商列表
const tableData = ref([]);
//查询参数
const code = ref();
//分页参数
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);

//方法

//关闭
let cls = () => {
  //抛出事件
  emits("close");
};

//每页显示的个数  每页的记录数
let chg = (pgsize) => {
  pageSize.value = pgsize;
  page.value = 1;
  init();
};
//页数发生变化  第几页
let chgpg = (pg) => {
  page.value = pg;
  init();
};

//表格双击事件
let sel = (row)=>{
    //当前选中的对象 传给父组件
    emits("choose",row)
    //关闭对话框
    cls()
}

//查询供应商列表
let init = async () => {
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    eid: user.eid,
    status: 1,
  };
  let res = await query(data);
  if(res.code==200){
    tableData.value=res.data.list

    //更新分页参数
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }

};

onMounted(async() => {
  user = getUser()
  await init();
});
</script>

<style scope></style>
